<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <el-form label-width="200px">
          <div class="tit">
            <h2>任务详情</h2>
            <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
          </div>
          <el-row>
            <el-form-item label="批次码">
              <span>{{dataInfo.batchCode}}</span>
            </el-form-item>
            <el-form-item label="医检名称:">
              <span>{{dataInfo.institutionName}}</span>
            </el-form-item>
            <el-form-item label="医院名称:">
              <span>{{dataInfo.hospitalSplicingName?dataInfo.hospitalSplicingName.split("-")[0]:""}}</span>
            </el-form-item>
            <el-form-item label="科室名称:">
              <span>{{dataInfo.hospitalSplicingName?dataInfo.hospitalSplicingName.split("-")[1]:""}}</span>
            </el-form-item>
            <el-form-item label="患者名称:">
              <span>{{dataInfo.hospitalSplicingName?dataInfo.hospitalSplicingName.split("-")[2]:""}}</span>
            </el-form-item>
            <el-form-item label="任务状态:">
              <span>{{formatTaskState(dataInfo.taskState)}}</span>
            </el-form-item>
            <el-form-item label="任务类型:">
              <span>{{formatTaskType(dataInfo.taskType)}}</span>
            </el-form-item>
            <el-form-item label="收样员名称:">
              <span>{{dataInfo.syUserName}}</span>
            </el-form-item>
            <el-form-item label="创建人:">
              <span>{{ dataInfo.createUserName}}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ dataInfo.createDate }}</span>
            </el-form-item>
            <el-form-item label="修改人:">
              <span>{{ dataInfo.modifyUserName}}</span>
            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{ dataInfo.modifyDate }}</span>
            </el-form-item>
          </el-row>
        </el-form>
        
       
        
        <div class="tit">
          <h2>原始单图片</h2>
        </div>
        <el-row style="width:1000px">
            <el-col :span="8" 
            v-for="(item, index) in reportTaskImages" 
            style="
            height: 300px;" 
            :key="item.taskImageId">
                <div class="imgList">
                    <div class="img-item"  :class="{active:item.flag}"  @click="handleCheckImg(index)"  @dblclick="hanldeViewerImage(index)">
                        <img 
                            style="width: 200px; height: 200px;"
                            :src="item.imageUrl" 
                            title="双击预览图片"/>
                        <el-image-viewer
                          v-if="showViewer"
                          :initial-index="imgViewerIndex"
                          :on-close="()=>{showViewer = false}"
                          :url-list="imageUrlList">
                        </el-image-viewer>
                       
                    </div>
                    
                    
                </div>
                <div style="text-align: center;">
                        编号:{{item.taskImageId}}&nbsp;&nbsp;状态:{{formatTaskState(item.imageState)}}
                </div>
            </el-col>
        
        </el-row>
        <el-row  type="flex" justify="center" style="margin-bottom:20px;width:1000px">
            <el-button v-if="IsShow" @click="unlock">解锁录单</el-button>
            <el-button type="primary" @click="startRecord">
              开始录单
            </el-button>

        </el-row>
       

      </div>
    </div>
  </template>
  
  <script>
  import TaskApi from '@/api/task/task';
  import ElImageViewer from "element-ui/packages/image/src/image-viewer"
  export default {
    data() {
      return {
        showViewer:false,
        dataInfo: {},
        tableData:[],
        beeperHouse:{},
        imageUrlList:[],
        imgViewerIndex:0,
        taskImageIds:[],
        reportTaskImages:[],
        timer:"",
        IsShow:false,
      };
    },
    components:{
      ElImageViewer,
    },
    watch:{
      taskImageIds:{
        handler(newValue){
          if(newValue.length>0){
            let flag = this.reportTaskImages.filter(item=>newValue.some(item2=>item.taskImageId==item2)).some(item3=>item3.imageState==5)
            flag?this.IsShow = true:this.IsShow = false
            
          }else{
            this.IsShow = false
          }
        },
        deep:true
      }
    },
    mounted() {
      this.getData()
      
      this.timer = setInterval(()=>{
        this.getImagList()
      },10000)
    },
    beforeDestroy(){
      clearInterval(this.timer)
    },
    methods: {
      getData() {
        TaskApi.getTaskInfo({id:this.$route.query.id}).then(res=>{
          this.dataInfo = res.data
          this.imageUrlList = this.dataInfo.reportTaskImages.map(item=>item.imageUrl)
          this.reportTaskImages = this.dataInfo.reportTaskImages
          this.reportTaskImages.forEach(item=>{
            this.$set(item,"flag",false)
          })
        })
      },
      getImagList(){
        let cond = {
          reportTaskId:this.$route.query.id,
          imageState:null,
          userId:null
        }
        TaskApi.getImageListByTaskId(cond).then(res=>{
          this.imageUrlList = res.data.map(item=>item.imageUrl)
          res.data.forEach(item=>{
            // reportTaskImages里面存放的每一个图片的flag都保存下来
            this.reportTaskImages.find(item2=>{
              if(item2.taskImageId==item.taskImageId&&item2.flag){
                // 找到对应的图片，如果flag是true保存下来
                  this.$set(item,"flag",true)
                  return true
                }
            })
            // 不过不是就赋值为false
            if(!item.flag){
                this.$set(item,"flag",false)
            }
              
          })
          this.reportTaskImages = res.data
        })
      },
      // 双击预览图片
      hanldeViewerImage(index){
        this.showViewer = true
        this.imgViewerIndex = index
      },

      // 单击选中图片
      handleCheckImg(index){
            const temp = this.reportTaskImages[index]
            if(this.reportTaskImages[index].imageState==10){
              return
            }
            temp.flag = !this.reportTaskImages[index].flag
            this.taskImageIds= this.reportTaskImages.filter(item=>item.flag).map(item=>item.taskImageId)
            
        },
        formatTaskState(value){
            if(value == 1){
                return "待录单"
            }else if(value == 5){
                return "录单中"
            }else if(value == 10){
                return "已录单"
            }else if(value == 15){
                return "已取消"
            }
        },
        formatTaskType(value){
            if(value == 1){
                return "常规"
            }else if(value == 2){
                return "核酸"
            }
        },
       // 解锁录单
       unlock(){
          let cond = {
            taskImageIds:this.taskImageIds,
            reportTaskId:this.dataInfo.reportTaskId,
            unlock:1
          }
        TaskApi.updateState(cond).then(res=>{
          this.getImagList()
          this.IsShow = false
          // this.taskImageIds = []
        })
        },
      // 开始录单   
      startRecord(){
        let _this = this
        if(this.taskImageIds.length==0){
          this.$message.error("请选择录单图片")
          return
        }
        let cond = {
            taskImageIds:this.taskImageIds,
            reportTaskId:this.dataInfo.reportTaskId
        }
        TaskApi.updateState(cond).then(res=>{
                this.$router.push({
                path:"/task/taskAdd",
                query:{
                  reportTaskId: _this.$route.query.id,
                }
            })
        })
        
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({ path:'/equip/beeperManagement'})
      }
      
    },
  };
  </script>
  <style lang="scss" src="@/assets/css/views/add.scss" scope></style>
  <style scoped lang="scss">
                .imgList{
                  width: 100%;
                  margin-top: 20px;
                  background-color: #FFF;
                  display: flex;
                  justify-content: center;
                  flex-wrap: wrap;
                .active{
                    display: block;
                    width: 196px;
                    height: 196px;
                    line-height: 0;
                    font-size: 0;
                    vertical-align: middle;
                    border: 3px solid #2b89fd;
                    -webkit-transform: rotate(0deg);
 
                }
                .active::before{
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    border: 12px solid #2b89fd;
                    border-top-color: transparent;
                    border-left-color: transparent;
                }
                .active::after{
                    content: "";
                    display: block;
                    width: 5px;
                    height: 10px;
                    position: absolute;
                    right: 4px;
                    bottom: 5px;
                    border: 1px solid #fff;
                    border-top-color: transparent;
                    border-left-color: transparent;
                    transform: rotate(45deg);
                    cursor: pointer;
                }
                .img-item{
                    width: 196px;
                    height: 196px;
                    overflow: hidden;
                    background-color: #FFFFFF;
                    margin: 20px;
                    cursor: pointer;
                    img{
                        height: 196px;
                    }
                   
                }
            }
          

  </style>
  